<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      
        div input[type=text]{
          
            width: 200px;
            margin-top: 10px;
            padding: 10px;
        }
        div{
            

            text-align: center;
        }
        form{
            display: inline-block;
            border: 2px solid red;
            box-shadow: 10px 10px 10px 10px;

            text-align: center;
            animation-name: form;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }
        div input[type=radio]{
            padding: 10px;
            width: 80px;
            margin-top: 10px;
        }
        div input[type=checkbox]{
            padding: 10px;
            margin-top: 10px;
            width: 40px;

        }
        div input[type=date]{

            padding: 10px;
            width: 200px;
            margin-top: 10px;
        }
        div input[type=time]{
            padding: 10px;
            width: 200px;
            margin-top: 10px;
        }
        div button{
            background-color: gray;
            border: 0;
            color: white;
            font-style: italic;
            font-weight: 700;
            padding: 10px;
            width: 200px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        div input[type=text]:hover{
            width: 230px;

        }
        
        #d1 select{
            width: 70px;
            border: 0;
            background-color: gray;
            color: white;
            font-weight: 700;
        }
        #d1 option{
            width: 70px;
            border: 0;
            background-color: gray;
            color: white;
            font-weight: 700;
            

        }
        #d1 input[type=checkbox], #d1 select{
            margin-top: 30px;
        }
        @keyframes form{
            0%{
              
                transform: scale(0.5,0.5);

            }
            100%{
                
                transform: scale(1,1);
            }
        }
        button:hover{
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div id="d1">
        <h1>表单1</h1>
        <form action="./服务器响应.html">
            <label for="name1">
                <input type="text" id="name1" placeholder="姓名:">
            </label>
            <br>
            <label for="phone1">
                <input type="text" id="phone1" placeholder="手机:">
            </label>
            <br>
            <p>出生年月日</p>
            <label for="day1">
                <input type="date" name="day1" id="day1">
            </label>
            <br>
            <label for="emaile">
                <input type="text" id="emaile" placeholder="邮箱:">
            </label>
            <br>
            <label for="gender1">
                男<input type="radio" id="gender1" value="man">
                女<input type="radio" id="gender1" value="woman">
            </label>
            <br> 
            婚姻状况:
            <select name="ma" id="ma">
               
                <option value="已婚">已婚</option>
                <option value="未婚">未婚</option>
                <option value="丧偶">丧偶</option>
                <option value="离婚">离婚</option>
            </select>
            <br>
            爱好:
            看书<input type="checkbox" value="看书">
            打球<input type="checkbox" value="打球">
            跑步<input type="checkbox" value="跑步">
            游戏<input type="checkbox" value="游戏">
            看电影<input type="checkbox" value="看电影">
            <br>
            <button type="submit">点击提交</button>
            <button type="reset">重置</button>
        </form>
    </div>




    <div id="d2">
        <h1>表单2</h1>
        <form action="./服务器响应.html">
            <label for="name">
                <input type="text" name="username" id="name" placeholder="姓名:">
            </label>
            <br>
            <label for="gender">
               男<input type="radio" name="sex" id="gender" value="male">
                女<input type="radio" name="sex" id="gender" value="female">
            </label>
            <br>
            <label for="phone">
               <input type="text" id="phone" name="smartphone" placeholder="手机号:">
            </label>
            <br>
            <label for="identity">
                <input type="text" id="identity" name="identitynumber" placeholder="身份证:">
            </label>
            <br>
            <label for="comname">
              <input type="text" id="comname" name="asname" placeholder="同行人姓名:">
            </label>
            <br>
            <label for="num">
                <input type="text" id="num" name="carnum" placeholder="车牌号:">
            </label>
            <br>
            <p>来访日期</p>
            <label for="date">
             <input type="date" id="date" name="day">
            </label>
            <br>
            <p>来访时间</p>
            <label for="time">
                <input type="time" id="time" name="daytime">
            </label>
            <br>
            <label for="reason">
                <h3>来访原因</h3>
                公务<input type="checkbox" value="公务">
                会友<input type="checkbox" value="会友">
                游玩<input type="checkbox" value="游玩">
                考试<input type="checkbox" value="考试">
                培训<input type="checkbox" value="培训">
            </label>
            <br>
            <button type="submit">点击提交</button>
        </form>
    </div>
</body>

</html>